<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-31 17:46:49
 * @LastEditTime: 2020-03-16 17:44:22
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../../css/base.css" />
    <script type="text/javascript" src="../../script/jquery.js"></script>
    <script type="text/javascript" src="../../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../../script/vue.min.js"></script>
    <script type="text/javascript" src="../../script/vant.min.js"></script>
    <script type="text/javascript" src="../../script/fastclick.js"></script>
    <script type="text/javascript" src="../../script/base.js"></script>
    <style type="text/css">
        .van-search {
            /* background: transparent !important; */
            padding: 6px 0;
            border-bottom: 1px solid #ebedf0;
        }

        /* .van-search__content {
             background: transparent
         } */

        .van-search__action {
            color: #cd1b21;
            font-size: 13px;
            font-weight: 700;
        }

        .result {
            position: absolute;
            left: 0;
            top: 47px;
            bottom: 0;
            right: 0;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .mt {
            margin-top: 10px;
        }

        .border {
            border-right: 1px solid #ebedf0;
        }

        .label {
            line-height: 22px;
            text-align: center;
            font-weight: 500;
            font-size: 13px;
            color: #969799;
            padding: 8px 0;
        }

        .label .label-value {
            color: #3a3a3a;
            font-size: 14px;
        }

        .van-panel__header-value {
            color: #969799;
        }

        .un .van-panel__header-value {
            color: #cd1b21;
        }

        .van-cell__title {
            max-width: 90px;
        }

        .dis .van-cell__title {
            color: #9e9e9e;
        }

        /* .van-cell__value {
            text-align: right;
        } */

        .tab {
            overflow: hidden;
            position: absolute;
            left: 0;
            top: 0;
            width: 130px;
            padding-left: 10px;
            height: 47px;
            line-height: 55px;
            background: rgb(255, 255, 255);
            border-bottom: 1px solid #ebedf0;
        }

        .tab .t-d {
            font-size: 0;
            border-radius: 6px;
        }

        .tab .t-d>div {
            display: inline-block;
            width: 55px;
            text-align: center;
            height: 24px;
            font-size: 13px;
            border: 1px solid #cd1b21;
            line-height: 22px;
        }

        .tab .t-d>div.on {
            background: #cd1b21;
            color: #fff;
            line-height: 22px;
        }

        .total {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 50px;
            width: 100%;
            padding: 0 15px;
            line-height: 50px;
            font-size: 14px;
            background: #fff;
            box-shadow: 0 0 5px rgb(200, 198, 198);
        }

        .money {
            font-size: 16px;
            font-weight: 700;
            color: #cd1b21;
            margin-left: 15px;
        }

        .elp {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 200px;
        }

        .van-field__right-icon {
            position: absolute;
            top: -10px;
            right: 0;
            bottom: -10px;
            line-height: 44px;
            padding: 0 12px;
            background: #fff;
        }

        textarea {
            padding-right: 30px !important;
        }

        .van-field__control:disabled {
            color: #000000;
        }

        .van-cell {
            line-height: 30px;
        }

        .van-field__right-icon {
            position: absolute;
            top: -10px;
            right: 0;
            bottom: -10px;
            line-height: 44px;
            padding: 0 12px;
            background: #fff;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="init-full" @click="clickDom($event)">
            <van-nav-bar class="head" title="商城客户详情" left-arrow @click-left="onClickLeft">
                <div slot="right" class="head-right">
                    <span @click.stop="openNavigation">
                        <img src="../../image/navigation.png" />
                    </span>
                    <span @click.stop="showMenu = !showMenu">
                        <img src="../../image/menu.png" />
                    </span>
                </div>
            </van-nav-bar>
            <div class="body-no-bottom">
                <div class="content">
                    <van-cell title="客户名称" :value="userData.UserName" class="dis"></van-cell>
                    <van-cell title="修理厂名称" :value="userData.ClientName" class="dis"></van-cell>
                    <van-cell title="联系人" :value="userData.LinkName || ''" class="dis"></van-cell>
                    <van-cell title="联系方式" :value="userData.LinkTelphone || ''" class="dis"></van-cell>
                    <!-- <van-cell title="地址" :value="fullAddress" class="dis"></van-cell> -->
                    <van-field style="margin-top:10px;" type="textarea" rows="1" :autosize="{minHeight:24}"
                        v-model="fullAddress" clearable label="详细地址" right-icon="location" placeholder="请填写详细地址">
                        <div slot="right-icon" @click="openMap">
                            <van-icon name="location"></van-icon>
                        </div>
                    </van-field>

                    <van-cell title="积分" :value="fullInfo.Points || 0" class="dis" style="margin-top: 10px;"></van-cell>
                    <van-cell title="账户余额" class="dis" is-link @click="openCountDetail">
                        <div>￥{{fullInfo.Balance}}</div>
                    </van-cell>
                    <van-cell title="透支额度" :value="'￥' + (fullInfo.IsArrears?fullInfo.Quota:0)" class="dis"></van-cell>
                </div>
                <van-loading v-if="showLoading" />
            </div>
        </div>

        <div class="head-menu" v-if="showMenu">
            <img class="menu-arrow" src="../../image/menu-arrow.png" />

            <div @click="openGoodsShelves">
                <img src="../../image/module/module-15.png" />
                <span>货架查询</span>
            </div>
            <div @click="openOrder(1)">
                <img src="../../image/module/module-14.png" />
                <span>商城订单</span>
            </div>
            <div @click="openOrder(-1)">
                <img src="../../image/module/module-47.png" />
                <span>退款订单</span>
            </div>
            <div @click="openCart">
                <img src="../../image/module/module-51.png" />
                <span>购物车</span>
            </div>
            <div @click="setOrderForOther">
                <img src="../../image/module/module-52.png" />
                <span>代下单</span>
            </div>
        </div>


    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {
        //$('.init-full').show();


        var maps = [
            ['高德地图', 'iosamap://', 'com.autonavi.minimap'],
            ['百度地图', 'baidumap://', 'com.baidu.BaiduMap']
        ];
        var buttons = [];

        api.addEventListener({
            name: 'setCustomerData'
        }, function (ret, err) {
            vm.userData = ret.value.userData;

        })

        var map = api.require('bMap');
        if (api.systemType == 'android') {
			map.setAgreePrivacy({
			agree:true
		});	
		}

        // if (api.systemType == 'ios') {
            map.initMapSDK(function (ret) { });
        // }



        var userInfo = FLD.getUserInfo();
        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                ifConfirm: false,
                showMenu: false,
                showArea: false,
                areas: [],
                userData: api.pageParam.userData,
                fullInfo: '',
                fullAddress: ''
            },
            created: function () {
                var that = this;
                that.getDefualtArea();
                that.getShoppingUserData();
                that.appInstalled();
            },
            methods: {
                openMap() {
                    var that = this;
                    api.openWin({
                        name: 'customersLocation',
                        url: '../customersLocation.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: {
                            customerData: that.userData,
                            saveType: '商城'
                        }
                    })
                },
                getDefualtArea() {
                    var that = this;
                    var texts = '';
                    if (!that.userData.RegionPath) {
                        that.fullAddress = that.userData.Address;
                    } else {
                        var fullregionpath = that.userData.RegionPath.split(',');
                        FLD.ajax('sp_getRegion', { parentRegionId: 0 }, function (res) {
                            var row1 = res.ds.filter(function (item) {
                                return item.RegionId == parseInt(fullregionpath[0]);
                            })
                            if (row1.length) {
                                texts += row1[0].RegionName;
                            }

                            FLD.ajax('sp_getRegion', { parentRegionId: row1[0].RegionId }, function (res) {
                                var row2 = res.ds.filter(function (item) {
                                    return item.RegionId == parseInt(fullregionpath[1]);
                                })
                                if (row2.length) {
                                    texts += row2[0].RegionName;
                                }
                                FLD.ajax('sp_getRegion', { parentRegionId: row2[0].RegionId }, function (res) {
                                    var row3 = res.ds.filter(function (item) {
                                        return item.RegionId == parseInt(fullregionpath[2]);
                                    })
                                    if (row3.length) {
                                        texts += row3[0].RegionName;
                                    }
                                    that.fullAddress = texts + that.userData.Address;

                                })

                            })

                        })
                    }

                },
                getShoppingUserData() {
                    var that = this;
                    FLD.ajax('sp_getMemberInfo', { h_userId: that.userData.UserId }, function (res) {
                        that.fullInfo = res.ds[0];
                    })
                },
                clickDom(e) {
                    if (!$(e.target).closest('.head-menu').length) {
                        this.showMenu = false;
                    }
                },
                appInstalled(num) {
                    var that = this;
                    if ((num = num ? num : 0) < maps.length) {
                        api.appInstalled({
                            appBundle: api.systemType == 'ios' ? maps[num][1] : maps[num][2]
                        }, function (ret, err) {
                            if (ret.installed) {
                                buttons.push(maps[num][0]);
                                maps[num].push(false);
                            } else {
                                buttons.push(maps[num][0] + ' ( 未安装 )');
                                maps[num].push(true);
                            }
                            that.appInstalled(++num);
                        });
                    }
                },
                getDistance() {
                    var that = this;
                    if (!that.userData.C_Longitude || !that.userData.C_Latitude) {
                        layer.open({
                            content: '请先保存仓库定位!',
                            skin: 'msg',
                            time: 2
                        });
                        return false;
                    }
                    if (!that.userData.Longitude || !that.userData.Latitude) {
                        layer.open({
                            content: '请先保存客户定位!',
                            skin: 'msg',
                            time: 2
                        });
                        return false;
                    }
                    map.searchRoute({
                        id: 1,
                        type: 'drive',
                        policy: 'ecar_dis_first',
                        start: {
                            lon: that.userData.C_Longitude,
                            lat: that.userData.C_Latitude
                        },
                        end: {
                            lon: that.userData.Longitude,
                            lat: that.userData.Latitude
                        }
                    }, function (ret, err) {
                        if (ret.status) {
                            layer.open({
                                content: '计算成功!',
                                skin: 'msg',
                                time: 2
                            });
                            that.userData.Distance = (ret.plans[0].distance / 1000).toFixed(2);
                        }
                    });
                },
                openNavigation() {
                    var that = this;

                    api.actionSheet({
                        buttons: buttons
                    }, function (ret, err) {
                        ret.buttonIndex -= 1;
                        if (ret.buttonIndex == 2) {
                            return false;
                        } if (!maps[ret.buttonIndex][3]) {
                            if (that.userData.Latlng) {
                                var Latlng = that.userData.Latlng.split(',');
                                if (ret.buttonIndex == 0) {
                                    var gd_latlng = that.bd_decrypt(Latlng[0], Latlng[1]);
                                    if (api.systemType == 'ios') {
                                        location.href = encodeURI('iosamap://path?sourceApplication=福路德&dlat=' + gd_latlng.lat + '&dlon=' + gd_latlng.lng + '&dev=0&t=0');
                                    } else {
                                        location.href = encodeURI('amapuri://route/plan/?sourceApplication=福路德&dlat=' + gd_latlng.lat + '&dlon=' + gd_latlng.lng + '&dev=0&t=0');
                                    }
                                } else if (ret.buttonIndex == 1) {
                                    if (api.systemType == 'ios') {

                                        location.href = encodeURI('baidumap://map/direction?destination=' + Latlng[1] + ',' + Latlng[0] + '&mode=driving&src=ios.baidu.福路德连锁');
                                    } else {
                                        location.href = encodeURI('bdapp://map/direction?destination=' + Latlng[1] + ',' + Latlng[0] + '&mode=driving&src=andr.baidu.福路德连锁');
                                    }
                                }
                            } else {
                                map.getCoordsFromName({
                                    address: that.fullAddress
                                }, function (_ret, err) {
                                    if (_ret.status) {
                                        var Latlng = [_ret.lon, _ret.lat];
                                        if (ret.buttonIndex == 0) {
                                            var gd_latlng = that.bd_decrypt(Latlng[0], Latlng[1]);
                                            if (api.systemType == 'ios') {
                                                location.href = encodeURI('iosamap://path?sourceApplication=福路德&dlat=' + gd_latlng.lat + '&dlon=' + gd_latlng.lng + '&dev=0&t=0');
                                            } else {
                                                location.href = encodeURI('amapuri://route/plan/?sourceApplication=福路德&dlat=' + gd_latlng.lat + '&dlon=' + gd_latlng.lng + '&dev=0&t=0');
                                            }
                                        } else if (ret.buttonIndex == 1) {
                                            if (api.systemType == 'ios') {
                                                location.href = encodeURI('baidumap://map/direction?destination=' + Latlng[1] + ',' + Latlng[0] + '&mode=driving&src=ios.baidu.福路德连锁');
                                            } else {
                                                location.href = encodeURI('bdapp://map/direction?destination=' + Latlng[1] + ',' + Latlng[0] + '&mode=driving&src=andr.baidu.福路德连锁');
                                            }
                                        }
                                    } else {
                                        layer.open({
                                            content: '未查询到有效地址!',
                                            skin: 'msg',
                                            time: 2
                                        });
                                    }
                                });
                            }

                        }
                    })
                },
                bd_decrypt(bd_lng, bd_lat) {
                    var X_PI = 3.14159265358979324 * 3000.0 / 180.0;
                    var x = bd_lng - 0.0065;
                    var y = bd_lat - 0.006;
                    var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
                    var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
                    var gg_lng = z * Math.cos(theta);
                    var gg_lat = z * Math.sin(theta);
                    return { lng: gg_lng, lat: gg_lat }
                },
                openGoodsShelves() {
                    var that = this;
                    that.showMenu = false;
                    api.openWin({
                        name: 'goodsShelves_shopping',
                        url: '../goodsShelves_shopping.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: {
                            clientInfo: that.userData
                        }
                    })
                },
                openOrder(index) {
                    var that = this;
                    that.showMenu = false;
                    if (index == 1) {
                        api.openWin({
                            name: 'orderList',
                            url: 'orderList.html',
                            reload: true,
                            slidBackEnabled: false,
                            pageParam: {
                                h_userId: that.userData.UserId
                            }
                        })
                    } else {
                        api.openWin({
                            name: 'refundList',
                            url: 'refundList.html',
                            reload: true,
                            slidBackEnabled: false,
                            pageParam: {
                                h_userId: that.userData.UserId,
                                type: 0
                            }
                        })
                    }

                },
                openCart() {
                    var that = this;
                    that.showMenu = false;
                    api.openWin({
                        name: 'shoppingCart',
                        url: 'shoppingCart.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: {
                            h_userId: that.userData.UserId
                        }
                    })
                },
                openCountDetail() {
                    var that = this;
                    api.openWin({
                        name: 'transactionRecord',
                        url: 'transactionRecord.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: {
                            userData: that.userData,
                            fullInfo: that.fullInfo
                        }
                    })
                },
                setOrderForOther() {
                    var that = this;
                    that.showMenu = false;
                    api.openWin({
                        name: 'setOrderForOther',
                        url: 'setOrderForOther.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: {
                            h_userId: that.userData.UserId
                        }
                    })

                },
                onClickLeft() {
                    api.closeWin();
                }
            }
        })
    };
</script>

</html>